<template>
  <!-- 月度样板引路情况 -->
  <a-spin :spinning="loading">
    <a-card>
      <title-name :title="`${$route.query.month}月度样板引路情况`"></title-name>
      <Empty v-if="sampleVOList.length < 2" description="暂无数据" />
      <template v-else>
        <template v-if="!queryParam.branchComId">
          <a-card class="mb20">
            本月各分公司共计计划实施样板引路：<a>{{ statistic.planNum || 0 }}</a
            >项<a-divider type="vertical" />实际实施：<a>{{ statistic.realNum || 0 }}</a
            >项<a-divider type="vertical" />组织班组样板观摩：<a>{{ statistic.observeNum || 0 }}</a
            >次
          </a-card>
          <a-table rowKey="id" class="mb20" bordered :pagination="false" :columns="columns" :dataSource="sampleVOList"></a-table>
        </template>
        <div v-for="(item, index) in sampleDetails" :key="index">
          <div class="branchName">{{ item[0].branchComName }}</div>
          <div>
            <Empty v-if="!item.length" description="暂无数据" />
            <a-table bordered rowKey="id" :pagination="false" :columns="columns2" :dataSource="item"> </a-table>
          </div>
        </div>
      </template>
    </a-card>
    <!-- 编辑样板引路情况 -->
    <DialogForm ref="dialogForm" :visible.sync="visible" edit-model="E" headerTitle="编辑样板引路情况" :width="1000" :form="form" :formList="formList" :rules="rules" @confirm="submitForm" />
  </a-spin>
</template>

<script>
import { getSampleSelf, updateSampleSelf } from '@/api/quality/qualityMonth' // api
import { Empty } from 'ant-design-vue' // 无数据提示
import DialogForm from '@/components/DialogForm' // 表单弹窗
const columns = [
  {
    title: '序号',
    width: 80,
    align: 'center',
    dataIndex: 'index',
    customRender() {
      return arguments[1].id !== '-1' ? arguments[2] + 1 : ''
    }
  },
  {
    title: '分公司名称',
    dataIndex: 'branchComName'
  },
  {
    title: '计划实施数量',
    dataIndex: 'planNum'
  },
  {
    title: '实际实施数量',
    dataIndex: 'realNum'
  },
  {
    title: '组织班组样板观摩数量',
    dataIndex: 'observeNum'
  }
]
export default {
  name: 'MonthlyModelGuideSituation',
  props: {
    // 业务id
    id: {
      type: [String, Number],
      default: () => ''
    },
    // 分公司id
    branchComId: {
      type: [String, Number],
      default: () => ''
    }
  },
  components: {
    DialogForm,
    Empty
  },
  props: {
    // 请求参数
    queryParam: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.columns = columns
    return {
      loading: false, // 加载控件
      form: {}, // 编辑表单
      visible: false, // 弹窗显隐控件
      rules: {
        observeNum: [{ required: true, message: '请输入班组样板观摩次数', trigger: 'change' }]
      }, // 校验规则
      formList: [{ type: 'BaseInputNumber', keyName: 'observeNum', label: '班组样板观摩次数', span: 12, precision: 0, attrs: { min: 0 } }], // 弹窗表单配置项
      sampleDetails: [], // 表格列表
      sampleVOList: [], // 统计列表信息
      statistic: {} // 统计详情
    }
  },
  computed: {
    columns2() {
      let columns = [
        {
          title: '序号',
          width: 80,
          align: 'center',
          dataIndex: 'index',
          customRender() {
            return arguments[1].id !== '-1' ? arguments[2] + 1 : ''
          }
        },
        {
          title: '项目名称',
          width: 230,
          dataIndex: 'projectName'
        },
        {
          title: '计划实施数量',
          width: 120,
          dataIndex: 'planNum'
        },
        {
          title: '实际实施数量',
          width: 120,
          dataIndex: 'realNum'
        },
        {
          title: '班组观摩次数',
          width: 120,
          dataIndex: 'observeNum'
        },
        {
          title: '实施样板内容',
          dataIndex: 'sampleContent',
          customRender: (e) => {
            let str = ''
            if (e && e.split(';:,')?.length) {
              const list = e.split(';:,')?.map((i, index) => <div>{Number(index) + 1 + '.' + (i || '')}</div>)
              return list
            }
            return str
          }
        }
      ]
      // 节点若为分公司则添加操作按钮
      this.queryParam.branchComId &&
        (this.$route.query.editModel == 2 || this.$route.query.editModel == 4) &&
        columns.push({
          title: '操作',
          dataIndex: 'actions',
          width: '80px',
          align: 'center',
          customRender: (text, record) => {
            return (
              record.id != '-1' && (
                <a
                  onClick={() => {
                    this.form.observeNum = record.observeNum
                    this.form.id = record.id
                    this.visible = true
                  }}
                >
                  编辑
                </a>
              )
            )
          }
        })
      return columns
    }
  },
  mounted() {
    // 初始化
    this.init()
  },
  methods: {
    /**
     * 合计
     * list：需要计算的列表
     */
    account(list) {
      return list?.length > 1 ? list.reduce((cur, pre) => (cur || 0) + (pre || 0)) : list[0] ?? 0
    },
    /**
     * 初始化
     */
    init() {
      this.loading = true
      // 请求详情
      getSampleSelf(this.queryParam)
        .then((res) => {
          if (res?.code === '0') {
            // 添加统计列表主键id（因为后端很离谱不返回id）
            res.data?.sampleVOList?.forEach((item, index) => {
              item.id = index
            })
            // 映射列表表格信息
            this.sampleDetails = res.data?.sampleDetails || {}
            // 映射统计表格信息
            this.sampleVOList = res.data?.sampleVOList || []
            // 计算统计表格的列合计
            for (let index in this.sampleDetails) {
              let item = this.sampleDetails[index]
              item.push({
                id: '-1',
                projectName: '合计',
                planNum: this.account(item.map((i) => i.planNum)),
                realNum: this.account(item.map((i) => i.realNum)),
                observeNum: this.account(item.map((i) => i.observeNum))
              })
            }
            if (this.sampleVOList?.length) {
              // 计算详情表格的列合计
              this.statistic = {
                id: '-1',
                branchComName: '合计',
                planNum: this.account(this.sampleVOList.map((i) => i.planNum)),
                realNum: this.account(this.sampleVOList.map((i) => i.realNum)),
                observeNum: this.account(this.sampleVOList.map((i) => i.observeNum))
              }
              this.sampleVOList.push(this.statistic)
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 提交表单
     * form：表单
     */
    submitForm(form) {
      this.$refs.dialogForm.loading = true
      form.qualityMonthId = this.$route.query.id
      form.isAdjust = this.$route.query.isAdjust
      updateSampleSelf(form)
        .then((res) => {
          if (res.code === '0') {
            this.init()
            this.$message.success('编辑成功！')
            this.visible = false
          }
        })
        .finally(() => {
          this.$refs.dialogForm.loading = false
        })
    }
  }
}
</script>

<style scoped>
.branchName {
  padding: 12px 0;
  text-align: center;
  font-weight: bolder;
}
</style>
